<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				list-style: none;
				text-decoration: none;
			}
			.warp{
				width: 520px;
				height: 280px;
				overflow: hidden;
				margin: 0 auto;
				position: relative;
			}
			.warp:hover .next,.warp:hover .pre{
				display: block;
			}
			.imgBox{
				width: 9999px;
			}
			.imgBox::after{
				content: "";//在imgBox后面添加空的块级元素
				display: block;
				clear: both;
			}
			.imgBox li{
				float: left;
				width: 520px;
				height: 280px;
			}
			.imgBox li img{
				width: 100%;
			}
			.next,.pre{
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				width: 30px;
				height: 30px;
				border-radius: 50%;
				background: rgba(0,0,0,0.5);
				color: #fff;
				font-size: 20px;
				line-height: 30px;
				text-align: center;
				cursor: pointer;
			}
			.next{
				right: 0;
				display: none;
			}
			.pre{
				left: 0;
				display: none;
			}
			.tran{
				transition: 500ms;
			}
			.pager{
				position: absolute;
				bottom: 5px;
				left: 50%;
				transform: translateX(-50%);
			}
			.pager span{
				display: inline-block;
				width: 10px;
				height: 10px;
				border-radius: 50%;
				background: #fff;
				margin: 0 3px;
				cursor: pointer;
			}
			.pager .active{
				background: skyblue;
			}
		</style>
	</head>
	<body>
		<div class="warp">
			<!--图片区-->
			<ul class="imgBox">
				<li><img src="img/11.jpg"/></li>
				<li><img src="img/22.jpg"/></li>
				<li><img src="img/33.jpg"/></li>
			</ul>
			<!--左右按钮-->
			<div class="next">&gt;</div>
			<div class="pre">&lt;</div>
			<!--分页器-->
			<div class="pager">
				<!--<span class="active"></span>
				<span></span>
				<span></span>-->
			</div>
		</div>
		<script type="text/javascript">
			var warp = document.querySelector(".warp"),
				imgBox = warp.querySelector(".imgBox"),
				next = warp.querySelector(".next"),
				pre = warp.querySelector(".pre"),
				ali = imgBox.querySelectorAll("li");
				
				var imgW = ali[0].offsetWidth;
				var index = 1;
				var isClick = true;
				
				imgBox.style.transform = "translateX(-"+imgW*index+"px)";
				
				var liclone = ali[0].cloneNode(true);
				imgBox.appendChild(liclone);
				
				var liclone2 = ali[ali.length-1].cloneNode(true);
				imgBox.insertBefore(liclone2,ali[0]);
				
				
				next.addEventListener("click",function(){
					if(isClick){
						index++;
						imgBox.style.transform = "translateX(-"+imgW*index+"px)";
						   if(!imgBox.classList.contains("tran")){
						   		imgBox.classList.add("tran");
						   }
						   addColor(index);
					}
					isClick = false;
				})
				
				pre.addEventListener("click",function(){
					if(isClick){
						index--;
						imgBox.style.transform = "translateX(-"+imgW*index+"px)";
						   if(!imgBox.classList.contains("tran")){
						   		imgBox.classList.add("tran");
						   }
						   addColor(index);
					}
					isClick = false;
				})
				
				imgBox.addEventListener("transitionend",function(){
					if(index == ali.length+1){
						index = 1;
						imgBox.style.transform = "translateX(-"+imgW*index+"px)";
						imgBox.classList.remove("tran");
					}
					
					if(index == 0){
						index = ali.length;
						imgBox.style.transform = "translateX(-"+imgW*index+"px)";
						imgBox.classList.remove("tran");
					}
					
					isClick = true;
				})
				
				setInterval(function(){
					if(isClick){
						index++;
						imgBox.style.transform = "translateX(-"+imgW*index+"px)";
						   if(!imgBox.classList.contains("tran")){
						   		imgBox.classList.add("tran");
						   }
						   addColor(index);
					}
					isClick = false;
				},1500)
				
				var pager = document.querySelector(".pager");
				for(i=0;i<3;i++){
					var span = document.createElement("span");
					pager.appendChild(span);
					if(i==0){
						span.classList.add("active");
					}
				}
				
				var aSpan = pager.children;
				for(var i=0;i<aSpan.length;i++){
					(function(k){
						aSpan[k].addEventListener("click",function(){
							if(!imgBox.classList.contains("tran")){
						   		imgBox.classList.add("tran");
						    }
							imgBox.style.transform = "translateX(-"+imgW*index+"px)";
							for(var j=0;j<aSpan.length;j++){
								aSpan[j].classList.remove("active");
							}
								aSpan[k].classList.add("active");
							
						})
					})(i)
				}
				function addColor(h){
				h=h-1;
				if(h>aSpan.length-1){//右边界
					h = 0;
				}else if(h<0){//左边界
					h=2
				}
				for(var j=0;j<aSpan.length;j++){
					aSpan[j].classList.remove("active");
				}
				aSpan[h].classList.add("active");
			}
		</script>
	</body>
</html>
